<script setup>
import { ref, defineOptions } from 'vue'
import { currentHot } from '@/api/getAxios'

// const getAssetsFile = (url: string) => {
//     return new URL(`../../assets/img/${url}`, import.meta.url).href;
// };
const hot = ref([])
const loading = ref(true)
currentHot().then((res) => {
    // console.log(res);
    hot.value = res.data.data.list
    loading.value = false
})

</script>
<template>
    <div class="current-hot" v-if="!loading">
        <h1 class="recommend">
            <span>本期热销</span>
            <span class="iconfont icon-tiaozhuan jump" @click="$router.push('/hotview')"></span>
        </h1>
        <ul>
            <li v-for="item in hot" @click="$router.push(`/BookInfo?storyId=${item.storyId}`)">
                <img :src="item.story.cover" alt="">
                <p>{{ item.story.name }}</p>
            </li>
        </ul>
    </div>

    <div v-else="loading" class="loading">
        <h1>
            <van-skeleton :row="1" />
        </h1>
        <ul>
            <li v-for="i in 6">
                <div class="img">
                    <van-skeleton :row="1" />
                </div>
                <p>
                    <van-skeleton :row="1" />
                </p>
            </li>
        </ul>
    </div>
</template>

<style scoped lang='less'>
@import "//at.alicdn.com/t/c/font_4308477_b0dr9qc1qq.css";

.current-hot {
    height: 119vw;
    background-color: #fff;
    margin-bottom: 15px;
    // margin-top: 10px;

    h1 {
        text-align: center;
        font-weight: bold;
        font-size: 22px;
        padding: 10px 0px;
        position: relative;

        span.jump {
            position: absolute;
            right: 0;
            font-size: 26px;
            margin-right: 20px;
        }
    }

    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        li {
            width: 27vw;
            height: 37vw;
            margin: 10px 10px 50px;
            border-radius: 10px;
            box-shadow: 0px 15px 7px -11px rgba(0, 0, 0, .3);

            img {
                border-radius: 10px;
                width: 100%;
                height: 100%;
            }

            p {
                display: -webkit-box;
                text-align: center;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }

        }
    }
}

.loading {
    // margin-top: 10px;
    background-color: #fff;

    h1 {
        padding-top: 10px;
        // margin-top: 10px;
        margin-left: 30vw;
    }

    ul {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;

        li {
            margin: 0 auto;
            width: 30vw;
            height: 37vw;
            margin-bottom: 10vw;


            .img {
                width: 100%;
                height: 100%;
                --van-skeleton-paragraph-width: 37vw;

                .van-skeleton {
                    width: 37vw;
                    // height: 30vw;
                }

                --van-skeleton-paragraph-height: 30vw;

                .van-skeleton-paragraph {
                    // width: var(--van-skeleton-paragraph-width);
                    height: var(--van-skeleton-paragraph-height);
                }
            }

            p {

                // margin-top: 5px;/
                .van-skeleton {
                    width: 37vw;
                    // height: 30vw;
                }
            }
        }
    }
}
</style>